<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-center-center h1 under-line") ---方波大剂量---
            div(class="flex-column-item h3" v-for="(menu,index) in currentPageMenus")
                div(:class="{'selected-text': menu.id == activeId ? true: false}",class="flex-row")
                    div(class="flex-row-item")
                        span {{menu.name}}
                        span(v-if="index != '2'") :
                    div(class="flex-row-item",:style="{flex:index == 2 ? 0 : 0.5,'text-align':'center'}")
                        span {{menu.value ? menu.value.value : ''}}
                        span(v-if="index != '2'") {{menu.unit}}

        control-amount(v-model="active",:visible="amountVisible",ref="control")
</template>

<script>
import moment from "moment";

export default {
  // 取消方波输入
  data() {
    return {
      menus: [
        {
          name: "方波剂量",
          id: 0,
          value: { name: 0, value: 0 },
          unit: "U",
          max: 27,
          min: 2,
          increment: 0.1
        },
        {
          name: "输注时间",
          id: 1,
          value: { name: 60, value: 60 },
          unit: "分",
          max: 240,
          min: 30,
          increment: 30
        },
        {
          name: window.dose.squareWare.tasking
            ? "取消方波输注>>"
            : "开始方波输注>>",
          id: 2
        }
      ],
      activeId: 0,
      active: null,
      page: { maxResultCount: 3, skipCount: 0 },
      amountVisible: false
    };
  },
  computed: {
    currentPageMenus() {
      const start = this.page.skipCount;
      const end = this.page.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    }
  },
  methods: {
    getActive(id) {
      return this.menus.find(menu => {
        return menu.id == id;
      });
    },
    up() {
      if (this.amountVisible) {
        this.$refs.control.up();
        return;
      } else {
        if (this.activeId == 0) {
          // this.page.skipCount = 3;
        } else if (this.activeId == 3) {
          this.page.skipCount = 0;
        }

        if (this.activeId == 0) {
          this.activeId = this.menus[this.menus.length - 1].id;
        } else {
          this.activeId = this.activeId - 1;
        }

        this.active = this.getActive(this.activeId);
      }
    },
    down() {
      if (this.amountVisible) {
        this.$refs.control.down();
        return;
      } else {
        if (this.activeId == 2) {
          // this.page.skipCount = 3;
        } else if (this.activeId == 5) {
          this.page.skipCount = 0;
        }

        if (this.activeId == this.menus[this.menus.length - 1].id) {
          this.activeId = 0;
        } else {
          this.activeId = this.activeId + 1;
        }
        this.active = this.getActive(this.activeId);
      }
    },

    back() {
      if (this.amountVisible) this.amountVisible = false;
      else this.$router.push("/large-dose/menu?index=2");
    },
    yes() {
      if (this.activeId == 2) {
        if (this.menus[0].value.value <= 0) return;
        if (!window.dose.squareWare.tasking) {
          window.dose.squareWare.amount = this.menus[0].value.value;
          window.dose.squareWare.minutes = this.menus[1].value.value;
          window.dose.squareWare.createAt = new Date();
          window.dose.records.push({
            date: new Date(),
            amount: window.dose.squareWare.amount,
            type: "S"
          });
        }
        window.dose.squareWare.tasking = !window.dose.squareWare.tasking;
        this.$router.push("/");
      } else {
        this.amountVisible = !this.amountVisible;
      }
    }
  },
  created() {
    this.menus[0].value = {
      name: window.dose.squareWare.tasking ? window.dose.squareWare.amount : 0,
      value: window.dose.squareWare.tasking ? window.dose.squareWare.amount : 0
    };
    this.menus[1].value = {
      name: window.dose.squareWare.tasking
        ? window.dose.squareWare.minutes
        : 60,
      value: window.dose.squareWare.tasking
        ? window.dose.squareWare.minutes
        : 60
    };
    this.active = this.menus[0];
  }
};
</script>

<style lang="less">
</style>
